<template>
	<div>
		<!--顶部导航-->
	  	<top-nav title="消息" ></top-nav>
	  	<ul class="message-list">
	  		<li @click="handleReply" :class="!isHand?'activeBack':''">
	  			<div class="list-left">
	  				<img src="../../assets/images/message/message-news.png" alt="" />
	  				<p>回复我的</p>
	  			</div>
	  			<div class="list-right">
	  				<b class="tabIcon" v-if="replyNum!=0">{{replyNum}}</b>
	  				<img src="../../assets/images/message/message-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleThumbs" :class="!isThumb?'activeBack':''">
	  			<div class="list-left">
	  				<img src="../../assets/images/message/message-praise.png" alt="" />
	  				<p>给我点赞</p>
	  			</div>
	  			<div class="list-right">
	  				<b class="tabIcon" v-if="futaNum!=0">{{futaNum}}</b>
	  				<img src="../../assets/images/message/message-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handlePrivate" :class="!isPrivate?'activeBack':''">
	  			<div class="list-left">
	  				<img src="../../assets/images/message/message-letter.png" alt="" />
	  				<p>我的私信</p>
	  			</div>
	  			<div class="list-right">
	  				<b class="tabIcon" v-if="privNum!=0">{{privNum}}</b>
	  				<img src="../../assets/images/message/message-icon.png"/>
	  			</div>
	  		</li>
	  		<li @click="handleNOtice" :class="!isNOtice?'activeBack':''">
	  			<div class="list-left">
	  				<img src="../../assets/images/message/message-notice.png" alt="" />
	  				<p>系统通知</p>
	  			</div>
	  			<div class="list-right">
	  				<!--{{systNum}}-->
	  				<b class="tabIcon" v-if="systNum!=0">{{systNum}}</b>
	  				<img src="../../assets/images/message/message-icon.png"/>
	  			</div>
	  		</li>
	  	</ul>
	</div>
</template>

<script>
	import TopNav from '../../components/commons/top-nav';
	import axios from "axios";
	import user from '../../utils/isLogin';
	export default{
		data(){
			return{
				isClick:true,
				isHand:true,
				isThumb:true,
				isPrivate:true,
				isNOtice:true,
				systNum:'',
				privNum:'',
				replyNum:'',
				futaNum:''
			}
		},
		created(){	
			var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
			if(userInfo == undefined || userInfo == null){
//				break;
			}else{
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				//系统通知
				axios.post(user.src + '/index/system/system_list')
				.then(res=> {
					if(res.status == 200){
						this.systNum = res.data.count
					}
				})
				.catch((error)=> { 
				});
				//私信
				axios.post(user.src + '/index/my/My_direct_messages',{
					userid: userId,
				})
				.then(res=> {
					if(res.status == 200){
						this.privNum = res.data.count
					}
				})
				.catch((error)=> { 
				});
				//回复我的
				axios.post(user.src + '/index/comment/reply_to_mycomment',{
					userId:userId
				})
				.then(res=> {
//						console.log(JSON.stringify(res))
					if(res.status == 200){
						this.replyNum = res.data.count;
					}
				})
				.catch((error)=> { 
				});
				//点赞赞
		    	axios.post(user.src + '/index/collect/Give_me_a_thumb_up' , {
					userid: userId,
				})
				.then((res)=> {
//						console.log(JSON.stringify(res))
					if(res.status == 200){
						this.futaNum = res.data.count;
					}
				})
				.catch((error)=> {
				   
				});
				setInterval(()=>{
					//系统通知
					axios.post(user.src + '/index/system/system_list')
					.then(res=> {
						if(res.status == 200){
							this.systNum = res.data.count
						}
					})
					.catch((error)=> { 
					});
					//私信
					axios.post(user.src + '/index/my/My_direct_messages',{
						userid: userId,
					})
					.then(res=> {
						if(res.status == 200){
							this.privNum = res.data.count
						}
					})
					.catch((error)=> { 
					});
					//回复我的
					axios.post(user.src + '/index/comment/reply_to_mycomment',{
						userId:userId
					})
					.then(res=> {
//						console.log(JSON.stringify(res))
						if(res.status == 200){
							this.replyNum = res.data.count;
						}
					})
					.catch((error)=> { 
					});
					//点赞赞
			    	axios.post(user.src + '/index/collect/Give_me_a_thumb_up' , {
						userid: userId,
					})
					.then((res)=> {
//						console.log(JSON.stringify(res))
						if(res.status == 200){
							this.futaNum = res.data.count;
						}
					})
					.catch((error)=> {
					   
					});
				},1000)
			}
			let plusReady = ()=>{
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			TopNav
		},
		methods:{
			handleReply () {
				this.isHand = false;
				if(this.isClick){
					this.isClick = false;
					var reply = plus.webview.create('reply.html','reply',{scrollIndicator:'none'},{});
					reply.addEventListener("loaded", ()=> {
					   reply.show('pop-in', 300);
					   this.isClick = true;
						this.isHand = true;
					   reply = null;
					}, false);
				}
			},
			handleThumbs (){
				this.isThumb = false;
				if(this.isClick){
					this.isClick = false;
					var thumbsup = plus.webview.create('thumbsup.html','thumbsup',{scrollIndicator:'none'},{});
					thumbsup.addEventListener("loaded", ()=> {
					   thumbsup.show('pop-in', 300);
					   this.isClick = true;
						this.isThumb = true;
					  	thumbsup = null;
					}, false);
				}
			},
			handlePrivate (){
				this.isPrivate = false;
				if(this.isClick){
					this.isClick = false;
					var privates = plus.webview.create('privates.html','privates',{scrollIndicator:'none'},{});
					privates.addEventListener("loaded", ()=> {
					   privates.show('pop-in', 300);
					   this.isClick = true;
						this.isPrivate = true;
					   privates = null;
					}, false);
				}
			},
			//系统通知
			handleNOtice (){
				this.isNOtice = false;
				if(this.isClick){
					this.isClick = false;
					var notice = plus.webview.create('notice.html','notice',{scrollIndicator:'none'},{});
					notice.addEventListener("loaded", ()=> {
					   notice.show('pop-in', 300);
					   this.isClick = true;
						this.isNOtice = true;
					   notice = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	.activeBack{
		background: #F6F6F6;
	}
	.message-list{
		background: #FFFFFF;
		li{
			padding:0 26px 0 32px;
			list-style: none;
			height: 139px;
			border-bottom: 0.1rem solid #f6f6f6;
			display: flex;
			justify-content: space-between;
		}
		.list-left img{
			float: left;
			display:block;
			width: 90px;
			height: 90px;
			margin-top: 29px;
			margin-right: 32px;
		}
		.list-left p{
			float: left;
			margin-top: 55px;
			font-size: 28px;
			color: #353535;
		}
		.list-right{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tabIcon{
			display: block;
			padding: 8px 10px 4px;
			background: red;
			border-radius: 50px;
			font-size: 20px;
			line-height: 20px;
			color: #fff;
			margin-right: 60px;
		}
		.list-right img{
			float: left;
			display:block;
			width: 16px;
			height: 26px;
			/*margin-top: 60px;*/
		}
	}
</style>